<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <!--输入框 token-->
    <label for="token">token: </label>
    <input id="token" placeholder="请输入token" v-model="token"/>
    <br>
    <!--按钮 新建目录-->
    <button @click="create()">新建目录</button>
    <br>
    <!--输入框 新建的或者输入的目录地址-->
    <label for="container-name">容器UUID: </label>
    <input id="container-name" placeholder="请输入容器uuid" v-model="container">
    <br>
    <!--拖或者点击上传 list TODO 多级目录上传-->
    <input type="file" multiple placeholder="请选择文件上传" :files="files">
    <button @click="update()">上传文件</button>
    <br>
    <div>{{status}}</div>
    <div>{{message}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var api = "http://hcen.cc:19001/html-container/api";
    var myHeaders = new Headers({
        'Access-Control-Allow-Origin': '*'
    });

    function create() {
        fetch(api + '/create?token=' + vm.token, {headers: myHeaders}).then(rep => rep.json()).then(bb => vm.container = bb)
    }

    function update() {
        vm.files.forEach(f => {
            const fd = new FormData();
            fd.append('file', f.files[0]);
            fd.append('container', vm.container);

            fetch(api + '/update?token=' + vm.token, {
                method: 'POST',
                body: fd,
                headers: myHeaders
            }).then(res => {
                if (res.ok) {
                    vm.status = (+new Date()) + 'success';
                    return res.json();
                } else {
                    vm.status('error')
                }
            }).then(res => {
                vm.status = 'res is: ' + res
            })
        })
    }

    var vm = new Vue({
        el: '#app',
        data: {
            status: '',
            message: '',
            files: [],
            token: '',
            container: ''
        }
    })
</script>
</body>
</html>